<!-- 确认报名 -->
<template>
	<view class="container">
		<view class="c-info">
			<view class="info-one">
				<view class="info-one-avatar">
					<!-- 4:3 -->
					<image :src="baseURL + info.document_img" mode=""></image>
				</view>
				<view class="info-one-content">
					<text>姓名：{{info.name}}</text>
					<text>性别：{{info.sex==1?'男':'女'}}</text>
					<text>国籍：{{info.national==1?'中国':info.national==2?'港澳台':'国外'}}</text>
					<text>民族：{{info.nation}}</text>
				</view>
			</view>
			<view class="info-two info-three">
				<view class="info-two-block" :style="{'width':'100%'}">
					<text>报名比赛：</text>
					<text>{{info.type_name}}</text>
				</view>
			</view>
			<view class="info-two">
				<view class="info-two-block">
					<text>报名组别：</text>
					<text>{{info.all_group_name}}</text>
				</view>
				<view class="info-two-block">
					<text>演奏曲目：</text>
					<text>{{info.act_song}}</text>
				</view>
				<view class="info-two-block">
					<text>演奏时长：</text>
					<text>{{info.act_duration}}</text>
				</view>
			</view>
			<view class="info-two info-three">
				<view class="info-two-block">
					<text>培训机构：</text>
					<text>{{info.organ_name}}</text>
				</view>
				<view class="info-two-block">
					<text>指导老师：</text>
					<text>{{info.train_teacher_name}}</text>
				</view>
				<view class="info-two-block">
					<text>联系方式：</text>
					<text>{{info.train_teacher_mobile}}</text>
				</view>
			</view>
			<view class="info-four">
				<view class="info-four-block">
					<text>报名时间：</text>
					<text>{{timeFormat}}</text>
				</view>
				<view class="info-four-block" v-if="info.check_reward_level_name">
					<text>获奖情况：</text>
					<text>{{info.check_reward_level_name}}</text>
				</view>
				<view class="info-four-block">
					<text>联系人：</text>
					<text>{{info.contact_name}}</text>
				</view>
				<view class="info-four-block">
					<text>联系方式：</text>
					<text>{{info.contact_mobile}}</text>
				</view>
				<view class="info-four-block">
					<text>邮寄地址：</text>
					<text>{{info.contact_address}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "",
		props: ["info"],
		computed:{
			timeFormat(){
				return uni.$u.timeFormat(this.info.createtime, 'yyyy年mm月dd日')
			}
		},
		data() {
			return {}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		.c-info {
			width: 100%;

			.info-one {
				width: 100%;
				height: 260rpx;
				display: flex;
				align-items: center;

				.info-one-avatar {
					width: 40%;
					text-align: center;

					&>image {
						width: 180rpx;
						height: 240rpx;
					}
				}

				.info-one-content {
					display: flex;
					flex-direction: column;
					line-height: 60rpx;
				}
			}

			.info-two {
				width: 100%;
				display: flex;
				justify-content: space-between;
				padding: 30rpx 0;
				overflow: hidden;
				box-sizing: border-box;

				.info-two-block {
					display: flex;
					flex-direction: column;
					
					&:nth-child(1) {
						width: 42%;
					}

					&:nth-child(2) {
						width: 25%;
					}

					&:nth-child(3) {
						width: 28%;
						word-break: break-all;
					}

					&>text {
						&:first-child {
							color: #aaa;
						}
					}
				}
			}

			.info-three {
				width: 100%;
				border-top: 1rpx solid #aaa;
				border-bottom: 1rpx solid #aaa;

				// .info-two-block {
				// 	&:nth-child(1) {
				// 		width: 45%;
				// 	}

				// 	&:nth-child(2) {
				// 		width: 25%;
				// 	}

				// 	&:nth-child(3) {
				// 		width: 30%;
				// 		word-break: break-all;
				// 	}
				// }

			}

			.info-four {
				width: 100%;
				padding: 30rpx 0;

				.info-four-block {
					line-height: 80rpx;
				}
			}

		}

		.info-btn {
			display: flex;

		}
	}
</style>
